<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户信息查询</title>
<!-- 导入JQuery的资源文件 -->
<script type="text/javascript"
	src="${basePath }static/JQuery1.12.4/jquery1.12.4.min.js"></script>
<!-- 导入bootstrap的资源文件 -->
<link rel="stylesheet"
	href="${basePath }static/bootstrap-3.3.7-dist/css/bootstrap.min.css"></link>
<link rel="stylesheet"
	href="${basePath }static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"></link>
<script type="text/javascript"
	src="${basePath }static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 第三方的日历插件 -->
<script type="text/javascript"
	src="${basePath }static/My97DatePicker/WdatePicker.js"></script>
<!-- ajax查询操作 -->
<script type="text/javascript">
	
	/**
	 使用ajax查询数据并进行显示操作
	 */
	function ajaxShowData() {
		console.info($("#formQuery").serialize());
		// 使用jquery的ajax函数获取服务器的数据，并进行回调显示
		$.ajax({
			type : "POST", // 等价于form的method属性
			url : "${basePath}UserInfoQueryServlet", //请求的服务器url地址；等价于form表单的 action属性
			data : $("#formQuery").serialize(), // 发送的数据
			dataType : "json", // 返回给ajax引擎的数据类型[返回的是json对象类型，如果不设置，则默认返回的是字符串类型]
			success : function(data) { // ajax引擎的回调函数，其中data就是服务器respon返回的数据，用于使用获取的数据更新页面
				console.info("Data Saved: ");
				console.info(data);
				// 解析json对象数据并进行显示
				// 解析结果字符串
				var strContent = "";
				// 遍历json数组，将数据取出进行显示
				/* jquery的each函数，第一个参数是被遍历的对象；
				   第二个参数是回调函数，也就是在该函数中处理被遍历对象
				   回调函数的两个参数：第一个是json数组的索引；第二个参数是被遍历的元素对象
				 */
				$.each(data, function(index, ev) {
					// 因为服务器端Servlet中查询到的结果集是list+实体类的形式，所有ev就是一个是实体类对象
					strContent += "<tr>";

					strContent += "<th scope='row'>";
					strContent += index + 1;
					strContent += "</th>";

					strContent += "<td>";
					strContent += ev.userName;
					strContent += "</td>";

					strContent += "<td>";
					strContent += ev.userRealName;
					strContent += "</td>";

					strContent += "<td>";
					strContent += ev.userEmail;
					strContent += "</td>";

					strContent += "<td>";
					strContent += ev.userRegisterDate;
					strContent += "</td>";

					strContent += "</tr>";

				});
				// 打印解析的内容结果
				console.info(strContent);
				// 解析完json数据内容之后，将解析出来的内容写到html对应的标签中
				$('#tbShowData').html(strContent);
			}
		});
	}
</script>
</head>
<body>
	<form id="formQuery" class="form-horizontal" action="${basePath }UserInfoAddServlet"
		method="post">
		<div class="form-group"></div>
		<div class="form-group">
			<label for="txtUserName" class="col-sm-2 control-label">用户名</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" id="txtUserName"
					name="txtUserName" placeholder="请输入用户名">
			</div>
			<label for="txtUserRealName" class="col-sm-2 control-label">真实姓名</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" id="txtUserRealName"
					name="txtUserRealName" placeholder="请输入真实姓名">
			</div>
		</div>
		<div class="form-group">

			<label for="txtUserEmail" class="col-sm-2 control-label">邮箱</label>
			<div class="col-sm-4">
				<input type="email" class="form-control" id="txtUserEmail"
					name="txtUserEmail" placeholder="请输入邮箱">
			</div>
			<label for="txtUserRegisterDate" class="col-sm-2 control-label">注册日期</label>
			<div class="col-sm-2">
				<input type="text" class="form-control" id="txtUserRegisterDate"
					name="txtUserRegisterDate" placeholder="请输入起始日期"
					onClick="WdatePicker()">

			</div>
			<div class="col-sm-2">
				<input type="text" class="form-control" id="txtUserRegisterDate2"
					name="txtUserRegisterDate2" placeholder="请输入截止日期"
					onClick="WdatePicker()">
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-4 col-sm-2">
				<button type="button" class="btn btn-default" onclick="ajaxShowData()">查询</button>
			</div>
			<div class="col-sm-offset-1 col-sm-2">
				<button type="reset" class="btn btn-default">重置</button>
			</div>
		</div>
	</form>
	<div class="bs-example" data-example-id="hoverable-table">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>序号</th>
					<th>用户名</th>
					<th>用户真实姓名</th>
					<th>邮箱</th>
					<th>注册日期</th>
				</tr>
			</thead>
			<tbody id="tbShowData">
				
			</tbody>
		</table>
	</div>
</body>
</html>